<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>紫薇，这是我的心意 ✨</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            overflow-x: hidden;
            background: #0a0a0a;
            font-family: 'Arial', '微软雅黑', sans-serif;
            min-height: 100vh;
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><text y="15" font-size="16">❤️</text></svg>'), auto;
        }

        /* 星空背景 */
        .starfield {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle linear infinite;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }

        /* 流星 */
        .shooting-star {
            position: fixed;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
            animation: shoot 2s linear;
            z-index: 1;
        }

        @keyframes shoot {
            0% {
                transform: translateX(0) translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateX(-300px) translateY(300px);
                opacity: 0;
            }
        }

        /* 紫薇花瓣飘落 */
        .petal {
            position: fixed;
            font-size: 20px;
            animation: petal-fall linear infinite;
            z-index: 2;
            pointer-events: none;
        }

        @keyframes petal-fall {
            0% {
                transform: translateY(-10vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(110vh) rotate(720deg);
                opacity: 0;
            }
        }

        /* 主容器 */
        .container {
            position: relative;
            z-index: 10;
            padding: 20px;
            max-width: 900px;
            margin: 0 auto;
        }

        /* 欢迎屏幕 */
        .welcome-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            background-size: 400% 400%;
            animation: gradientMove 15s ease infinite;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 1s, visibility 1s;
        }

        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .welcome-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .welcome-title {
            font-size: clamp(2rem, 6vw, 4rem);
            color: white;
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
            margin-bottom: 30px;
            animation: glow 2s infinite;
        }

        @keyframes glow {
            0%, 100% { text-shadow: 0 0 30px rgba(255, 255, 255, 0.8); }
            50% { text-shadow: 0 0 50px rgba(255, 255, 255, 1), 0 0 80px rgba(138, 43, 226, 0.8); }
        }

        .start-button {
            padding: 20px 50px;
            font-size: clamp(1.2rem, 3vw, 1.8rem);
            background: rgba(255, 255, 255, 0.2);
            border: 3px solid white;
            color: white;
            border-radius: 50px;
            cursor: pointer;
            backdrop-filter: blur(10px);
            transition: all 0.3s;
            animation: pulse-border 2s infinite;
        }

        @keyframes pulse-border {
            0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
            50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(255, 255, 255, 0.8); }
        }

        .start-button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        /* 标题 */
        .title {
            font-size: clamp(2.5rem, 6vw, 5rem);
            background: linear-gradient(45deg, #ff6ec4, #7873f5, #4facfe);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            margin: 40px 0;
            animation: gradient-shift 3s ease infinite;
            font-weight: bold;
            opacity: 0;
            transform: translateY(-50px);
        }

        .title.show {
            animation: gradient-shift 3s ease infinite, fadeInDown 1s forwards;
        }

        @keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes fadeInDown {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 相册轮播 */
        .photo-carousel {
            width: 300px;
            height: 300px;
            margin: 30px auto;
            position: relative;
            opacity: 0;
            transform: scale(0);
        }

        .photo-carousel.show {
            animation: bounceIn 0.8s forwards 0.5s;
        }

        @keyframes bounceIn {
            0% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }

        .photo-frame {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 15px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            position: relative;
            overflow: hidden;
        }

        .photo-inner {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: clamp(3rem, 8vw, 6rem);
            animation: photo-rotate 10s linear infinite;
        }

        @keyframes photo-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 信件 */
        .letter-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 30px;
            padding: 50px 40px;
            margin: 30px auto;
            border: 2px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
            opacity: 0;
            transform: translateY(50px);
        }

        .letter-container.show {
            animation: fadeInUp 1s forwards 1s;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 打字机效果 */
        .typewriter {
            color: #fff;
            font-size: clamp(1.1rem, 2.5vw, 1.4rem);
            line-height: 2;
            min-height: 50px;
            margin-bottom: 20px;
        }

        .cursor {
            display: inline-block;
            width: 3px;
            height: 1.2em;
            background: #ff6ec4;
            margin-left: 5px;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        /* 爱的理由卡片 */
        .reason-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
            opacity: 0;
        }

        .reason-cards.show {
            animation: fadeIn 1s forwards;
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        .reason-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px 20px;
            text-align: center;
            border: 2px solid rgba(255, 255, 255, 0.3);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        /* 移除卡片的::before伪元素动画，减少性能消耗 */

        .reason-card:hover {
            transform: translateY(-15px) scale(1.08) rotate(2deg);
            background: rgba(255, 255, 255, 0.3);
            box-shadow: 0 25px 50px rgba(138, 43, 226, 0.5), 0 0 30px rgba(255, 110, 196, 0.3);
            border-color: rgba(255, 255, 255, 0.6);
        }

        .reason-icon {
            font-size: 3rem;
            margin-bottom: 15px;
            display: block;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .reason-card:nth-child(1) .reason-icon { animation-delay: 0s; }
        .reason-card:nth-child(2) .reason-icon { animation-delay: 0.2s; }
        .reason-card:nth-child(3) .reason-icon { animation-delay: 0.4s; }
        .reason-card:nth-child(4) .reason-icon { animation-delay: 0.6s; }

        .reason-text {
            color: white;
            font-size: clamp(1rem, 2vw, 1.1rem);
            line-height: 1.6;
        }

        /* 倒计时 */
        .countdown-section {
            text-align: center;
            margin: 40px 0;
            padding: 30px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            opacity: 0;
        }

        .countdown-section.show {
            animation: fadeIn 1s forwards;
        }

        .countdown-title {
            color: #ff6ec4;
            font-size: clamp(1.2rem, 3vw, 1.8rem);
            margin-bottom: 20px;
        }

        .countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .countdown-item {
            background: linear-gradient(135deg, rgba(255, 110, 196, 0.3), rgba(120, 115, 245, 0.3));
            backdrop-filter: blur(15px);
            border-radius: 15px;
            padding: 20px;
            min-width: 100px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .countdown-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(138, 43, 226, 0.4);
            border-color: rgba(255, 255, 255, 0.4);
        }

        .countdown-number {
            font-size: clamp(2rem, 5vw, 3rem);
            color: white;
            font-weight: bold;
            text-shadow: 0 2px 10px rgba(255, 110, 196, 0.5);
        }

        .countdown-label {
            color: #ffd6e8;
            font-size: clamp(0.9rem, 2vw, 1.1rem);
            margin-top: 5px;
            font-weight: 500;
        }

        /* 表白宣言 */
        .confession {
            background: linear-gradient(135deg, rgba(255, 110, 196, 0.3), rgba(120, 115, 245, 0.3));
            border-radius: 25px;
            padding: 40px;
            margin: 40px 0;
            border: 3px solid rgba(255, 255, 255, 0.4);
            text-align: center;
            opacity: 0;
            position: relative;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(138, 43, 226, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.1);
        }

        /* 移除旋转光效动画，减少性能消耗 */

        .confession.show {
            animation: fadeInScale 1s forwards;
        }

        @keyframes fadeInScale {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .confession-text {
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            color: white;
            font-weight: bold;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 2px 10px rgba(255, 110, 196, 0.8);
            line-height: 1.6;
            position: relative;
            z-index: 1;
        }

        .highlight {
            color: #ff6ec4;
            font-size: 1.2em;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* 按钮区域 */
        .button-section {
            text-align: center;
            margin: 50px 0;
            opacity: 0;
        }

        .button-section.show {
            animation: fadeIn 1s forwards;
        }

        .btn {
            padding: 20px 50px;
            margin: 15px;
            font-size: clamp(1.2rem, 3vw, 1.5rem);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .btn:hover::before {
            width: 300px;
            height: 300px;
        }

        .btn span {
            position: relative;
            z-index: 1;
        }

        .btn-yes {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            background-size: 200% 200%;
            color: white;
            animation: shake 3s infinite, btnGradient 3s ease infinite;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        @keyframes shake {
            0%, 100% { transform: rotate(0deg); }
            2%, 6%, 10% { transform: rotate(-5deg); }
            4%, 8% { transform: rotate(5deg); }
        }

        @keyframes btnGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .btn-yes:hover {
            transform: scale(1.25) rotate(0deg);
            box-shadow: 0 20px 60px rgba(245, 87, 108, 0.8), 0 0 40px rgba(255, 110, 196, 0.6);
            animation: btnGradient 1s ease infinite;
        }

        .btn-no {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            background-size: 200% 200%;
            color: #666;
            border: 2px solid rgba(255, 255, 255, 0.3);
            animation: btnGradient 4s ease infinite;
        }

        .btn-no:hover {
            background: linear-gradient(135deg, #fed6e3 0%, #a8edea 100%);
            box-shadow: 0 15px 40px rgba(168, 237, 234, 0.5);
        }

        #hintText {
            color: #ff6ec4;
            margin-top: 20px;
            font-size: clamp(1rem, 2.5vw, 1.2rem);
            min-height: 30px;
            font-weight: 500;
            text-shadow: 0 2px 10px rgba(255, 110, 196, 0.5);
            animation: hintPulse 2s ease-in-out infinite;
        }

        @keyframes hintPulse {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 1; transform: scale(1.05); }
        }

        /* 成功弹窗 */
        .success-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 10000;
            display: none;
            justify-content: center;
            align-items: center;
        }

        .success-modal.show {
            display: flex;
        }

        .success-content {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            background-size: 200% 200%;
            padding: 60px 40px;
            border-radius: 30px;
            text-align: center;
            max-width: 90%;
            animation: modalBounce 0.8s, btnGradient 3s ease infinite;
            box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5), 0 0 50px rgba(138, 43, 226, 0.6);
            border: 3px solid rgba(255, 255, 255, 0.3);
            position: relative;
            overflow: hidden;
        }

        /* 移除成功弹窗的旋转光效，减少性能消耗 */

        @keyframes modalBounce {
            0% { transform: scale(0) rotate(-180deg); opacity: 0; }
            50% { transform: scale(1.2) rotate(10deg); }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        .success-emoji {
            font-size: clamp(4rem, 10vw, 8rem);
            animation: heartbeat 1s infinite;
            position: relative;
            z-index: 1;
            filter: drop-shadow(0 10px 20px rgba(255, 110, 196, 0.6));
        }

        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            25%, 75% { transform: scale(1.3); }
            50% { transform: scale(1.1); }
        }

        .success-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            color: white;
            margin: 20px 0;
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 2px 20px rgba(255, 110, 196, 0.8);
            position: relative;
            z-index: 1;
        }

        .success-text {
            color: white;
            font-size: clamp(1.2rem, 3vw, 1.8rem);
            line-height: 1.8;
            margin: 15px 0;
            position: relative;
            z-index: 1;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        /* 烟花 */
        .firework {
            position: fixed;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            z-index: 9999;
        }

        /* 互动功能区样式 */
        .interaction-zone {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            padding: 20px 0;
            position: relative;
        }

        /* 互动区简化背景 */
        .interaction-zone::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 50%, rgba(120, 115, 245, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 50%, rgba(255, 110, 196, 0.1) 0%, transparent 50%);
            z-index: 0;
            pointer-events: none;
        }

        .interaction-zone .container {
            position: relative;
            z-index: 1;
        }

        .nav-bar {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .nav-btn {
            padding: 12px 25px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
            backdrop-filter: blur(10px);
        }

        .nav-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 110, 196, 0.5);
        }

        .nav-btn.active {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            border-color: transparent;
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.5s;
        }

        .tab-content.active {
            display: block;
        }

        .welcome-back {
            text-align: center;
            margin: 40px 0;
        }

        .welcome-back h2 {
            font-size: clamp(2rem, 5vw, 3rem);
            color: white;
            margin-bottom: 10px;
        }

        .welcome-back p {
            color: #ff6ec4;
            font-size: clamp(1rem, 2.5vw, 1.3rem);
        }

        .together-time-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            margin: 30px 0;
            border: 2px solid rgba(255, 255, 255, 0.2);
            text-align: center;
        }

        .together-time-card h3 {
            color: #ff6ec4;
            font-size: clamp(1.3rem, 3vw, 1.8rem);
            margin-bottom: 20px;
        }

        #togetherDisplay {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
            color: white;
            font-size: clamp(1rem, 2.5vw, 1.2rem);
        }

        #togetherDisplay span {
            background: rgba(255, 110, 196, 0.2);
            padding: 10px 20px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .daily-quote {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            margin: 30px 0;
            border: 2px solid rgba(255, 255, 255, 0.2);
            text-align: center;
        }

        .daily-quote h3 {
            color: #ff6ec4;
            font-size: clamp(1.3rem, 3vw, 1.8rem);
            margin-bottom: 20px;
        }

        .daily-quote p {
            color: white;
            font-size: clamp(1rem, 2.5vw, 1.3rem);
            line-height: 1.8;
            margin: 20px 0;
            min-height: 60px;
        }

        .small-btn {
            padding: 10px 25px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            color: white;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
        }

        .small-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
        }

        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .action-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            border: 2px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s;
        }

        .action-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 110, 196, 0.5);
        }

        .action-icon {
            display: block;
            font-size: 3rem;
            margin-bottom: 10px;
        }

        .action-card span:not(.action-icon) {
            color: white;
            font-size: 1rem;
        }

        #loveCounter {
            margin-top: 10px;
            color: #ff6ec4;
            font-size: 0.9rem;
        }

        .message-input-area {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
        }

        #messageInput {
            flex: 1;
            padding: 15px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 25px;
            color: white;
            font-size: 1rem;
            backdrop-filter: blur(10px);
        }

        #messageInput::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        #messageInput:focus {
            outline: none;
            border-color: rgba(255, 110, 196, 0.5);
        }

        .messages-list {
            max-height: 400px;
            overflow-y: auto;
        }

        .message-item {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            animation: slideIn 0.3s;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .message-content {
            color: white;
            margin-bottom: 5px;
        }

        .message-time {
            color: #999;
            font-size: 0.85rem;
        }

        .photo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .photo-placeholder {
            aspect-ratio: 1;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            border: 2px dashed rgba(255, 255, 255, 0.2);
        }

        .quiz-container {
            margin-top: 30px;
        }

        .quiz-question {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 20px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            font-size: clamp(1.1rem, 2.5vw, 1.4rem);
            text-align: center;
        }

        .quiz-options {
            display: grid;
            gap: 15px;
            margin-bottom: 20px;
        }

        .quiz-option {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }

        .quiz-option:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 110, 196, 0.5);
            transform: scale(1.02);
        }

        .quiz-result {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            margin-top: 20px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            text-align: center;
            display: none;
        }

        .quiz-result.show {
            display: block;
            animation: bounceIn 0.5s;
        }

        /* 移动端优化 */
        @media (max-width: 600px) {
            .container {
                padding: 15px;
            }

            .letter-container {
                padding: 30px 20px;
            }

            .btn {
                display: block;
                width: 80%;
                margin: 15px auto;
            }

            .reason-cards {
                grid-template-columns: 1fr;
            }

            .nav-bar {
                gap: 5px;
            }

            .nav-btn {
                padding: 10px 15px;
                font-size: 0.9rem;
            }

            .quick-actions {
                grid-template-columns: 1fr;
            }

            .message-input-area {
                flex-direction: column;
            }
        }

        /* 特殊效果 */
        .rainbow-text {
            background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: rainbow 3s ease infinite;
        }

        @keyframes rainbow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
    </style>
</head>
<body>
    <!-- 欢迎屏幕 -->
    <div class="welcome-screen" id="welcomeScreen">
        <h1 class="welcome-title">✨ 哈咯紫薇 ✨</h1>
        <p style="color: white; font-size: clamp(1rem, 2.5vw, 1.3rem); margin-bottom: 30px;">我有话想对你说...</p>
        <button class="start-button" onclick="startExperience()">
            <span>点击开启惊喜 💝</span>
        </button>
    </div>

    <!-- 星空背景 -->
    <div class="starfield" id="starfield"></div>

    <!-- 主内容 -->
    <div class="container">
        <h1 class="title" id="mainTitle">致我的<span class="rainbow-text">紫薇女神</span></h1>

        <!-- 相册 -->
        <div class="photo-carousel" id="photoCarousel">
            <div class="photo-frame">
                <div class="photo-inner" id="photoInner">
                    🌸
                </div>
            </div>
        </div>

        <!-- 打字机效果 -->
        <div class="letter-container" id="letterContainer">
            <div class="typewriter" id="typewriter"></div>
        </div>

        <!-- 爱的理由 -->
        <div class="reason-cards" id="reasonCards">
            <div class="reason-card" onclick="showReason(1)">
                <span class="reason-icon">😊</span>
                <div class="reason-text">你的笑容<br/>如春日阳光</div>
            </div>
            <div class="reason-card" onclick="showReason(2)">
                <span class="reason-icon">🌟</span>
                <div class="reason-text">你的眼睛<br/>比星辰更闪亮</div>
            </div>
            <div class="reason-card" onclick="showReason(3)">
                <span class="reason-icon">💝</span>
                <div class="reason-text">你的体贴<br/>让我心动不已</div>
            </div>
            <div class="reason-card" onclick="showReason(4)">
                <span class="reason-icon">🎯</span>
                <div class="reason-text">你就是我<br/>一直在等的人</div>
            </div>
        </div>

        <!-- 在一起的时间（同意后才显示） -->
        <div class="countdown-section" id="togetherSection" style="display: none;">
            <div class="countdown-title">我们在一起的时间</div>
            <div class="countdown" id="togetherTime"></div>
        </div>

        <!-- 表白宣言 -->
        <div class="confession" id="confession">
            <div class="confession-text">
                <span class="highlight">紫薇</span>，<br/>
                在茫茫人海中遇见你，<br/>
                是我此生最美的意外！<br/>
                <span class="highlight">愿意和我在一起吗？</span>
            </div>
        </div>

        <!-- 按钮 -->
        <div class="button-section" id="buttonSection">
            <button class="btn btn-yes" onclick="handleYes()">
                <span>我超级愿意！💕</span>
            </button>
            <button class="btn btn-no" id="btnNo" onmouseover="dodgeButton()" ontouchstart="dodgeButton()">
                <span>我再想想...</span>
            </button>
            <div id="hintText"></div>
        </div>
    </div>

    <!-- 成功弹窗 -->
    <div class="success-modal" id="successModal">
        <div class="success-content">
            <div class="success-emoji">💖💝💗</div>
            <h2 class="success-title">太好了！</h2>
            <p class="success-text">你答应我啦！🎉</p>
            <p class="success-text">从今天起，我会用全部的温柔呵护你</p>
            <p class="success-text">我们的故事，正式开始 ✨</p>
            <button class="btn btn-yes" onclick="closeModal()" style="margin-top: 30px; animation: none;">
                <span>进入我们的小世界 →</span>
            </button>
        </div>
    </div>

    <!-- 互动功能区（同意后显示） -->
    <div class="interaction-zone" id="interactionZone" style="display: none;">
        <div class="container">
            <!-- 导航栏 -->
            <div class="nav-bar">
                <button class="nav-btn active" onclick="switchTab('home')">首页</button>
                <button class="nav-btn" onclick="switchTab('messages')">留言板</button>
                <button class="nav-btn" onclick="switchTab('photos')">回忆相册</button>
                <button class="nav-btn" onclick="switchTab('love-test')">默契测试</button>
            </div>

            <!-- 首页标签 -->
            <div class="tab-content active" id="tab-home">
                <div class="welcome-back">
                    <h2>欢迎回来，紫薇 💕</h2>
                    <p>这里是属于我们的小天地</p>
                </div>

                <!-- 在一起的时间 -->
                <div class="together-time-card">
                    <h3>我们在一起</h3>
                    <div id="togetherDisplay"></div>
                </div>

                <!-- 每日一句 -->
                <div class="daily-quote">
                    <h3>今日想对你说</h3>
                    <p id="dailyQuote"></p>
                    <button class="small-btn" onclick="refreshQuote()">换一句</button>
                </div>

                <!-- 快捷功能 -->
                <div class="quick-actions">
                    <div class="action-card" onclick="sendLove()">
                        <span class="action-icon">💕</span>
                        <span>送你一颗心</span>
                        <div id="loveCounter">已送: 0</div>
                    </div>
                    <div class="action-card" onclick="switchTab('messages')">
                        <span class="action-icon">💌</span>
                        <span>写留言</span>
                    </div>
                    <div class="action-card" onclick="playAgain()">
                        <span class="action-icon">🎮</span>
                        <span>重新表白</span>
                    </div>
                </div>
            </div>

            <!-- 留言板标签 -->
            <div class="tab-content" id="tab-messages">
                <h2>我们的留言板</h2>
                <div class="message-input-area">
                    <input type="text" id="messageInput" placeholder="写下你想说的话..." maxlength="100" onkeypress="if(event.key==='Enter') addMessage()">
                    <button class="small-btn" onclick="addMessage()">发送</button>
                </div>
                <div class="messages-list" id="messagesList"></div>
            </div>

            <!-- 回忆相册标签 -->
            <div class="tab-content" id="tab-photos">
                <h2>我们的回忆</h2>
                <p style="color: #999; text-align: center; margin: 40px 0;">
                    暂时还没有照片，但我们的回忆才刚刚开始...<br/>
                    未来这里会装满我们的美好瞬间 📸
                </p>
                <div class="photo-grid" id="photoGrid">
                    <div class="photo-placeholder">📷</div>
                    <div class="photo-placeholder">🌸</div>
                    <div class="photo-placeholder">💑</div>
                    <div class="photo-placeholder">🌈</div>
                </div>
            </div>

            <!-- 默契测试标签 -->
            <div class="tab-content" id="tab-love-test">
                <h2>默契小测试</h2>
                <div class="quiz-container">
                    <div class="quiz-question" id="quizQuestion"></div>
                    <div class="quiz-options" id="quizOptions"></div>
                    <div class="quiz-result" id="quizResult"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let dodgeCount = 0;
        let hasStarted = false;
        const crushDate = new Date('2024-01-01'); // 修改为你开始喜欢她的日期
        let petalInterval = null;
        let meteorInterval = null;

        // 创建星空（优化数量）
        function createStars() {
            const starfield = document.getElementById('starfield');
            for (let i = 0; i < 100; i++) { // 从200减少到100
                const star = document.createElement('div');
                star.className = 'star';
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                star.style.width = Math.random() * 3 + 1 + 'px';
                star.style.height = star.style.width;
                star.style.animationDuration = Math.random() * 3 + 2 + 's';
                star.style.animationDelay = Math.random() * 3 + 's';
                starfield.appendChild(star);
            }
        }

        // 停止背景动画
        function stopBackgroundAnimations() {
            // 清除花瓣
            if (petalInterval) {
                clearInterval(petalInterval);
                petalInterval = null;
            }
            // 清除流星
            if (meteorInterval) {
                clearInterval(meteorInterval);
                meteorInterval = null;
            }
            // 隐藏星空
            const starfield = document.getElementById('starfield');
            if (starfield) {
                starfield.style.display = 'none';
            }
            // 移除现有的花瓣和流星
            document.querySelectorAll('.petal, .shooting-star').forEach(el => el.remove());
        }

        // 创建流星
        function createShootingStar() {
            const star = document.createElement('div');
            star.className = 'shooting-star';
            star.style.left = Math.random() * 100 + '%';
            star.style.top = Math.random() * 50 + '%';
            document.body.appendChild(star);
            setTimeout(() => star.remove(), 2000);
        }

        // 创建紫薇花瓣（优化）
        function createPetals() {
            petalInterval = setInterval(() => {
                const petal = document.createElement('div');
                petal.className = 'petal';
                petal.innerHTML = ['🌸', '🌺', '🌼'][Math.floor(Math.random() * 3)]; // 减少种类
                petal.style.left = Math.random() * 100 + '%';
                petal.style.animationDuration = Math.random() * 5 + 5 + 's';
                petal.style.fontSize = Math.random() * 20 + 15 + 'px';
                document.body.appendChild(petal);
                setTimeout(() => petal.remove(), 10000);
            }, 800); // 从500ms增加到800ms，减少创建频率
        }

        // 开始体验
        function startExperience() {
            const welcomeScreen = document.getElementById('welcomeScreen');
            welcomeScreen.classList.add('hidden');

            setTimeout(() => {
                hasStarted = true;
                showContent();
            }, 1000);
        }

        // 显示内容
        function showContent() {
            document.getElementById('mainTitle').classList.add('show');

            setTimeout(() => {
                document.getElementById('photoCarousel').classList.add('show');
                rotateEmojis();
            }, 500);

            setTimeout(() => {
                document.getElementById('letterContainer').classList.add('show');
                startTypewriter();
            }, 1000);

            setTimeout(() => {
                document.getElementById('reasonCards').classList.add('show');
            }, 3000);

            setTimeout(() => {
                document.getElementById('countdownSection').classList.add('show');
                updateCountdown();
            }, 4000);

            setTimeout(() => {
                document.getElementById('confession').classList.add('show');
            }, 5000);

            setTimeout(() => {
                document.getElementById('buttonSection').classList.add('show');
            }, 6000);
        }

        // 相册旋转
        const emojis = ['🌸', '💝', '🌹', '✨', '💕', '🎀', '🌺', '💖'];
        let emojiIndex = 0;
        function rotateEmojis() {
            setInterval(() => {
                emojiIndex = (emojiIndex + 1) % emojis.length;
                document.getElementById('photoInner').textContent = emojis[emojiIndex];
            }, 2000);
        }

        // 打字机效果
        const messages = [
            "嗨，紫薇~ 🌸",
            "你的名字真好听，紫薇，像夏天盛开的花一样美丽",
            "我想成为你的专属天气预报员，每天早上告诉你要穿什么",
            "我想成为你的专属外卖员，记住你所有喜欢的味道",
            "我想成为你的专属司机，载你去所有想去的地方",
            "最重要的是，我想成为你的男朋友 💕",
            "一起看春夏秋冬，一起吃遍大街小巷",
            "一起分享快乐，一起度过难关",
            "所以，...",
            "你愿意给我这个机会吗？ 💝"
        ];

        let messageIndex = 0;
        let charIndex = 0;
        let currentMessage = '';

        function startTypewriter() {
            typeNextChar();
        }

        function typeNextChar() {
            if (messageIndex < messages.length) {
                if (charIndex < messages[messageIndex].length) {
                    currentMessage += messages[messageIndex][charIndex];
                    document.getElementById('typewriter').innerHTML = currentMessage + '<span class="cursor"></span>';
                    charIndex++;
                    setTimeout(typeNextChar, 100);
                } else {
                    currentMessage += '<br/><br/>';
                    messageIndex++;
                    charIndex = 0;
                    setTimeout(typeNextChar, 800);
                }
            }
        }

        // 更新在一起的时间
        function updateTogetherTime() {
            const acceptTime = localStorage.getItem('acceptTime');
            if (!acceptTime) return;

            const now = new Date();
            const start = new Date(parseInt(acceptTime));
            const diff = now - start;

            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);

            document.getElementById('togetherDisplay').innerHTML = `
                <span>${days} 天</span>
                <span>${hours} 小时</span>
                <span>${minutes} 分</span>
                <span>${seconds} 秒</span>
            `;

            setTimeout(updateTogetherTime, 1000);
        }

        // 显示爱的理由
        const reasons = [
            "因为你的笑容总是能让我的心情瞬间变好，就像冬天的阳光一样温暖！😊",
            "因为你的眼睛里有星辰大海，每次看着你照片都会不自觉地沉醉其中~ ✨",
            "因为你的体贴温柔，总是能在我需要的时候给我最暖心的关怀！💝",
            "因为遇见你，我才明白什么叫'对的人'，你就是我一直在等的那个人！❤️"
        ];

        function showReason(index) {
            alert(reasons[index - 1]);
            createFireworks(3); // 从5减少到3
        }

        // 躲避按钮
        const hints = [
            "按钮跑了~ 😏",
            "嘿嘿，再试试看呀~ 😜",
            "你是不是故意的呀？😏",
            "好吧好吧，我知道你想点哪个了~ 😊",
            "算了，我直接帮你选吧！💕"
        ];

        function dodgeButton() {
            const btn = document.getElementById('btnNo');
            const hintText = document.getElementById('hintText');

            if (dodgeCount < 4) {
                // 移动按钮到随机位置
                const maxX = window.innerWidth - btn.offsetWidth - 40;
                const maxY = window.innerHeight - btn.offsetHeight - 40;

                btn.style.position = 'fixed';
                btn.style.left = Math.max(20, Math.random() * maxX) + 'px';
                btn.style.top = Math.max(100, Math.random() * maxY) + 'px';
                btn.style.transition = 'all 0.3s';

                hintText.textContent = hints[dodgeCount];
                dodgeCount++;

                // 创建小烟花
                createFireworks(2);
            } else {
                // 第5次直接变成同意
                btn.textContent = '好啦好啦，我愿意！💕';
                btn.className = 'btn btn-yes';
                btn.onclick = handleYes;
                btn.onmouseover = null;
                btn.ontouchstart = null;
                btn.style.position = 'relative';
                btn.style.left = 'auto';
                btn.style.top = 'auto';
                hintText.textContent = hints[4];
            }
        }

        // 同意按钮
        function handleYes() {
            // 保存同意时间
            if (!localStorage.getItem('acceptTime')) {
                localStorage.setItem('acceptTime', Date.now());
            }

            // 创建超多烟花
            for (let i = 0; i < 15; i++) {
                setTimeout(() => {
                    createFireworks(10);
                }, i * 200);
            }

            // 显示成功弹窗
            setTimeout(() => {
                document.getElementById('successModal').classList.add('show');
            }, 500);

            // 继续创建流星
            const meteorInterval = setInterval(createShootingStar, 300);
            setTimeout(() => clearInterval(meteorInterval), 10000);
        }

        // 关闭弹窗，显示互动区
        function closeModal() {
            document.getElementById('successModal').classList.remove('show');
            document.querySelector('.container').style.display = 'none';
            document.getElementById('welcomeScreen').style.display = 'none';
            document.getElementById('interactionZone').style.display = 'block';

            // 停止背景动画，提升性能
            stopBackgroundAnimations();

            updateTogetherTime();
            refreshQuote();
            loadMessages();
            updateLoveCounter();
            initQuiz();
        }

        // 切换标签
        function switchTab(tabName) {
            // 更新导航按钮
            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');

            // 更新内容区
            document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
            document.getElementById(`tab-${tabName}`).classList.add('active');

            // 如果切换到测试，重新初始化
            if (tabName === 'love-test') {
                initQuiz();
            }
        }

        // 每日一句
        const quotes = [
            "想和你一起吃很多餐饭，走很多路",
            "你是我今天的限定，也是我永远的偏爱",
            "遇见你之后，我的世界开始有了颜色",
            "希望以后的每一天，都能看到你的笑容",
            "想把全世界的温柔都给你",
            "和你在一起的时光，是我最珍贵的回忆",
            "你就是我心里最柔软的那个地方",
            "想陪你度过每一个春夏秋冬",
            "你的名字，是我听过最美的情话",
            "余生很长，想和你一起慢慢走"
        ];

        function refreshQuote() {
            const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
            document.getElementById('dailyQuote').textContent = randomQuote;
        }

        // 送心功能
        function sendLove() {
            let count = parseInt(localStorage.getItem('loveCount') || '0');
            count++;
            localStorage.setItem('loveCount', count);
            updateLoveCounter();

            // 创建飘心动画
            for (let i = 0; i < 5; i++) {
                setTimeout(() => {
                    createFloatingHeart();
                }, i * 100);
            }
        }

        function updateLoveCounter() {
            const count = localStorage.getItem('loveCount') || '0';
            document.getElementById('loveCounter').textContent = `已送: ${count}`;
        }

        function createFloatingHeart() {
            const heart = document.createElement('div');
            heart.textContent = '💕';
            heart.style.position = 'fixed';
            heart.style.left = Math.random() * window.innerWidth + 'px';
            heart.style.bottom = '0px';
            heart.style.fontSize = '30px';
            heart.style.zIndex = '10000';
            heart.style.pointerEvents = 'none';
            heart.style.animation = 'floatUp 3s ease-out forwards';
            document.body.appendChild(heart);

            setTimeout(() => heart.remove(), 3000);
        }

        // 添加飘心动画CSS
        const style = document.createElement('style');
        style.textContent = `
            @keyframes floatUp {
                to {
                    transform: translateY(-100vh) rotate(360deg);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);

        // 留言板功能
        function addMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();

            if (!message) return;

            const messages = JSON.parse(localStorage.getItem('messages') || '[]');
            messages.push({
                content: message,
                time: new Date().toLocaleString('zh-CN')
            });
            localStorage.setItem('messages', JSON.stringify(messages));

            input.value = '';
            loadMessages();
            createFireworks(2); // 从3减少到2
        }

        function loadMessages() {
            const messages = JSON.parse(localStorage.getItem('messages') || '[]');
            const messagesList = document.getElementById('messagesList');

            if (messages.length === 0) {
                messagesList.innerHTML = '<p style="color: #999; text-align: center; margin: 40px 0;">还没有留言，快来写第一条吧~</p>';
                return;
            }

            messagesList.innerHTML = messages.reverse().map(msg => `
                <div class="message-item">
                    <div class="message-content">${msg.content}</div>
                    <div class="message-time">${msg.time}</div>
                </div>
            `).join('');
        }

        // 默契测试
        const quizData = [
            {
                question: "如果可以去旅行，你最想去哪里？",
                options: ["海边", "山里", "城市", "草原"],
                answer: 0,
                result: "我也最想带你去看海，听浪花的声音"
            },
            {
                question: "你最喜欢什么时候的我？",
                options: ["认真工作的时候", "陪你聊天的时候", "对你笑的时候", "每时每刻"],
                answer: 3,
                result: "我也是，每时每刻都喜欢你"
            },
            {
                question: "如果可以做一件事，你最想做什么？",
                options: ["一起看电影", "一起吃美食", "一起散步", "一起发呆"],
                answer: -1,
                result: "其实不管做什么，只要和你在一起就好"
            },
            {
                question: "你觉得最浪漫的事是什么？",
                options: ["牵手散步", "一起看星星", "送你礼物", "陪你聊到深夜"],
                answer: -1,
                result: "对我来说，陪在你身边就是最浪漫的事"
            },
            {
                question: "你希望我们的未来是什么样的？",
                options: ["平淡温馨", "充满惊喜", "相互陪伴", "一起成长"],
                answer: -1,
                result: "我希望的未来里，一直都有你"
            }
        ];

        let currentQuiz = 0;

        function initQuiz() {
            currentQuiz = Math.floor(Math.random() * quizData.length);
            showQuiz();
        }

        function showQuiz() {
            const quiz = quizData[currentQuiz];
            document.getElementById('quizQuestion').textContent = quiz.question;
            document.getElementById('quizResult').classList.remove('show');

            const optionsHtml = quiz.options.map((option, index) =>
                `<div class="quiz-option" onclick="selectAnswer(${index})">${option}</div>`
            ).join('');

            document.getElementById('quizOptions').innerHTML = optionsHtml;
        }

        function selectAnswer(selected) {
            const quiz = quizData[currentQuiz];
            document.getElementById('quizOptions').style.display = 'none';

            let resultText = quiz.result;
            if (quiz.answer !== -1 && selected === quiz.answer) {
                resultText = "我们想的一样！" + resultText;
            }

            document.getElementById('quizResult').innerHTML = `
                <div style="font-size: 3rem; margin-bottom: 20px;">💕</div>
                <div style="font-size: 1.2rem; line-height: 1.8;">${resultText}</div>
                <button class="small-btn" onclick="nextQuiz()" style="margin-top: 20px;">下一题</button>
            `;
            document.getElementById('quizResult').classList.add('show');
            createFireworks(3); // 从5减少到3
        }

        function nextQuiz() {
            currentQuiz = (currentQuiz + 1) % quizData.length;
            document.getElementById('quizOptions').style.display = 'grid';
            showQuiz();
        }

        // 重新表白
        function playAgain() {
            document.getElementById('interactionZone').style.display = 'none';
            document.querySelector('.container').style.display = 'block';

            // 重新启动背景动画
            document.getElementById('starfield').style.display = 'block';
            if (!petalInterval) createPetals();
            if (!meteorInterval) meteorInterval = setInterval(createShootingStar, 4000);

            // 重置页面到表白宣言部分
            window.scrollTo(0, document.getElementById('confession').offsetTop - 100);

            // 添加小烟花
            createFireworks(2);
        }

        // 创建烟花（优化性能）
        function createFireworks(count) {
            const colors = ['#ff1744', '#f50057', '#ff4081', '#e91e63', '#9c27b0', '#673ab7'];

            for (let i = 0; i < count; i++) {
                const x = Math.random() * window.innerWidth;
                const y = Math.random() * window.innerHeight;

                // 从40个粒子减少到25个
                for (let j = 0; j < 25; j++) {
                    const firework = document.createElement('div');
                    firework.className = 'firework';
                    firework.style.left = x + 'px';
                    firework.style.top = y + 'px';
                    firework.style.background = colors[Math.floor(Math.random() * colors.length)];

                    const angle = (Math.PI * 2 * j) / 25;
                    const velocity = Math.random() * 5 + 3;
                    const vx = Math.cos(angle) * velocity;
                    const vy = Math.sin(angle) * velocity;

                    document.body.appendChild(firework);

                    animateFirework(firework, x, y, vx, vy);
                }
            }
        }

        function animateFirework(element, startX, startY, vx, vy) {
            let posX = startX;
            let posY = startY;
            let opacity = 1;
            let gravity = 0.2;
            let velocityY = vy;

            function animate() {
                posX += vx;
                posY += velocityY;
                velocityY += gravity;
                opacity -= 0.015;

                element.style.left = posX + 'px';
                element.style.top = posY + 'px';
                element.style.opacity = opacity;

                if (opacity > 0) {
                    requestAnimationFrame(animate);
                } else {
                    element.remove();
                }
            }

            animate();
        }

        // 初始化
        window.addEventListener('load', () => {
            // 检查是否已经同意过
            if (localStorage.getItem('acceptTime')) {
                // 已经同意过，直接进入互动区（不创建背景动画）
                document.getElementById('welcomeScreen').style.display = 'none';
                document.querySelector('.container').style.display = 'none';
                document.getElementById('interactionZone').style.display = 'block';
                document.getElementById('starfield').style.display = 'none';
                updateTogetherTime();
                refreshQuote();
                loadMessages();
                updateLoveCounter();
                initQuiz();
            } else {
                // 首次访问，创建背景动画
                createStars();
                createPetals();
                meteorInterval = setInterval(createShootingStar, 4000); // 从3000ms增加到4000ms
            }
        });

        // 点击屏幕创建烟花（仅在表白页面）
        document.addEventListener('click', (e) => {
            const inInteractionZone = document.getElementById('interactionZone').style.display === 'block';
            if (hasStarted && !inInteractionZone && !e.target.closest('.btn') && !e.target.closest('.start-button')) {
                createFireworks(2); // 从3减少到2
            }
        });
    </script>
</body>
</html>